#{$css-scope} {
  // Color palette (immutable).
  // ------------------------------------------------------
  $colors: (
    'pink': #e91e63,
    'purple': #a741b9,
    'deep-purple': #673ab7,
    'indigo': #3f51b5,
    'blue': #2196f3,
    'light-blue': #03a9f4,
    'cyan': #04cbe5,
    'teal': #1db3a8,
    'green': #4caf50,
    'light-green': #90d73f,
    'lime': #cee029,
    'yellow': #ffe70f,
    'amber': #ffc107,
    'orange': #ff9800,
    'deep-orange': #ff6825,
    'red': #fa3317,
    'brown': #845848,
    'blue-grey': #6c8693,
    'grey': #848484
  );

  // For each color, create a [color] and a [color]--bg associated classes,
  // + 6 shades lighter and 6 shades darker.
  @each $label, $color in $colors {
    .#{$label}--bg {background-color: $color;}
    .#{$label} {color: $color;}

    @for $i from 1 through 6 {
      $light-increment: 7.5;
      $light-offset: 0;
      $dark-increment: 6.2;
      // Some color shades need bigger or smaller increments to end up with the same scale.
      @if $label == 'deep-orange' {
        $light-increment: 6.4;
      }
      @if $label == 'orange' {
      }
      @else if $label == 'green' {
        $light-increment: 7.6;
        $dark-increment: 5.7;
      }
      @else if $label == 'amber' {
      }
      @else if $label == 'pink' {
        $light-increment: 6.7;
        $light-offset: -4;
      }
      @else if $label == 'red' {
        $light-increment: 6.5;
        $light-offset: -1;
      }
      @else if $label == 'indigo' {
        $light-increment: 8;
        $dark-increment: 5.7;
      }
      @else if $label == 'deep-purple' {
        $light-increment: 8;
        $dark-increment: 5.7;
      }
      @else if $label == 'light-blue' {
        $light-increment: 7.8;
      }
      @else if $label == 'light-green' {
        $light-increment: 6;
        $light-offset: -5;
      }
      @else if $label == 'lime' {
        $light-increment: 6.2;
        $light-offset: -6;
      }
      @else if $label == 'yellow' {
        $light-increment: 5.5;
        $light-offset: -8;
      }
      @else if $label == 'purple' {
        $light-increment: 6.5;
        $light-offset: -8.5;
      }
      @else if $label == 'cyan' {
        $light-increment: 9.4;
        $light-offset: 6.5;
        $dark-increment: 5.7;
      }
      @else if $label == 'teal' {
        $light-increment: 9.6;
        $light-offset: 5;
        $dark-increment: 5.4;
      }
      @else if $label == 'blue' {
        $light-increment: 6.8;
        $dark-increment: 6.8;
      }
      @else if $label == 'brown' {
        $light-increment: 8.8;
        $dark-increment: 5;
      }
      .#{$label}-light#{$i}--bg {background-color: lighten($color, $light-increment * $i - $light-offset);}
      .#{$label}-light#{$i} {color: lighten($color, $light-increment * $i - $light-offset);}
      .#{$label}-dark#{$i}--bg {background-color: darken($color, $dark-increment * $i);}
      .#{$label}-dark#{$i} {color: darken($color, $dark-increment * $i);}
    }
  }

  .primary--bg {color: rgb(var(--w-base-bg-color-rgb));}
  .white--bg {background-color: #fff;}
  .white {color: #fff;}
  .black--bg {background-color: #000;}
  .black {color: #000;}
  .transparent--bg {background-color: transparent;}
  .transparent {color: transparent;}
  .inherit--bg {background-color: inherit;}
  .inherit {color: inherit;}
  // ------------------------------------------------------

  // Theming colors.
  // These classes carry colors which change automatically when switching theme.
  // ------------------------------------------------------
  .base-color {color: rgba(var(--w-base-color-rgb), 0.7);}
  .base-color--bg {background-color: rgb(var(--w-base-bg-color-rgb));}
  .contrast-color {color: rgba(var(--w-contrast-color-rgb), 0.7);}
  .contrast-color--bg {background-color: rgb(var(--w-contrast-bg-color-rgb));}
  // ------------------------------------------------------

  // Status colors - must stay last and have highest priority.
  // ------------------------------------------------------
  .info {color: var(--w-info-color);}
  .info--bg {background-color: var(--w-info-color);color: #fff;}
  .warning {color: var(--w-warning-color);}
  .warning--bg {background-color: var(--w-warning-color);color: #fff;}
  .success {color: var(--w-success-color);}
  .success--bg {background-color: var(--w-success-color);color: #fff;}
  .error {color: var(--w-error-color);}
  .error--bg {background-color: var(--w-error-color);color: #fff;}
  // ------------------------------------------------------

  // The only colors remaining to define are user custom colors and shades.
  // The associated CSS will be generated from dynamic-css.js, and injected as a first stylesheet,
  // before this one (so the rules in this file have more priority).
}
